<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>微信标签列表</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <!--检索项-->
                            <div class="layui-form">
                                <label class="layui-btn" onclick="addWechatTag()">新增微信标签</label>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" id="name" name="name" placeholder="搜索微信标签" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select id="onStatus">
                                            <option name="status" value="0">选择状态</option>
                                            <option name="status" value="10">正常</option>
                                            <option name="status" value="20">禁用</option>
                                        </select>
                                    </div>
                                </div>
                                <button class="layui-btn layui-btn-xs" onclick="reloadList();">搜索</button>
                                <button class="layui-btn layui-btn-xs layui-btn-primary" onclick="reloadList(true);">
                                    重置
                                </button>
                            </div>
                            <!--表格内容区域-->
                            <table id="LAY-wechat-manage" lay-filter="LAY-wechat-manage"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="display: none" class="p-20" id="wechat_tag">
        <form class="layui-form" id="wechat_tag_form" action="">
            <input type="hidden" name="id" lay-verify="id" id="wechat_id" value="">
            <div class="layui-form-item">
                <label class="layui-form-label">微信标签</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" lay-verify="name" autocomplete="off"
                           placeholder="请输入微信标签" class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">标签状态</label>
                    <div class="layui-input-inline">
                        <input type="radio" id="defaultRadio" name="status" lay-verify="status" value="10" title="正常"
                               checked>
                        <input type="radio" id="forbiddenRadio" name="status" lay-verify="status" value="20" title="禁用">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <a class="layui-btn" lay-submit lay-filter="formSubmit">提交</a>
                </div>
            </div>
        </form>
    </div>
    <script>
        var reloadList;
        var addWechatTag;
        var getSearchData;
        layui.use(['table', 'laytpl', 'form', 'laydate'], function () {
            var $ = layui.$
                , table = layui.table
                , form = layui.form

            form.render()

            form.verify({
                name: function (value) {
                    if (value.length < 1) {
                        return '请输入微信标签';
                    }
                }
            });

            form.on('submit(formSubmit)', function (data) {
                layer.msg('提交中', {
                    shadeClose: false
                    , icon: 16
                    , shade: 0.01
                });
                if (data.field.id) {
                    //请求编辑微信标签的接口
                    service.put('api/v1/wxmark', {
                        id: parseInt(data.field.id),
                        name: data.field.name,
                        status: parseInt(data.field.status)
                    }).then((response) => {
                        if (response.code === 200) {
                            layer.msg('编辑成功', {offset: '45vh', icon: 1, time: 1000}, function () {
                                layer.closeAll()
                                table.reload('LAY-wechat-manage', {
                                    where: getSearchData(),  //设定异步数据接口的额外参数，任意设
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            })
                        } else {
                            layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                        }
                    }).catch((err) => {
                        layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                    })
                } else {
                    //请求添加微信标签的接口
                    service.post('api/v1/wxmark', {
                        name: data.field.name,
                        status: parseInt(data.field.status)
                    }).then((response) => {
                        if (response.code === 200) {
                            layer.msg('添加成功', {offset: '45vh', icon: 1, time: 1000}, function () {
                                layer.closeAll()
                                table.reload('LAY-wechat-manage', {
                                    where: getSearchData(),  //设定异步数据接口的额外参数，任意设
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            })
                        } else {
                            layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                        }
                    }).catch((err) => {
                        layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                    })
                }
                return false
            });

            // 获得检索条件
            getSearchData = function () {
                var onStatus = parseInt($('#onStatus').find("option:selected").val());
                var name = $('#name').val();
                return {
                    status: onStatus,
                    name: name
                }
            }

            // 添加微信标签
            addWechatTag = function () {
                $('#name').val('')
                layer.open({
                    type: 1,
                    area: ['600px', '400px'],
                    title: '添加微信标签',
                    content: $('#wechat_tag'),
                    success: function () {
                        $('#wechat_tag input[name=name]').val('')
                        $('#wechat_tag input[name=id]').val('')
                        $('#wechat_tag #defaultRadio').prop('checked', true)
                        $('#wechat_tag #forbiddenRadio').prop('checked', false)
                        form.render('radio')
                    }
                })
            }

            table.render({
                elem: '#LAY-wechat-manage'
                , url: HOST + 'api/v1/wxmarks' //数据接口
                , method: 'post'
                , headers: {Authorization: layui.data("TOKEN").TOKEN}
                , contentType: 'application/json'
                , page: true //开启分页
                , where: getSearchData()
                , type: "POST"
                , loading: true
                , cols: [[ //表头
                    {field: 'name', title: '名字', fixed: 'left'},
                    {field: 'count', title: '使用量'},
                    {fixed: 'right', width: 270, align: 'center', toolbar: '#barDemo'}
                ]]
                , title: '微信标签管理'
                , defaultToolbar: ['filter', 'exports']
                , error: function (err) {
                    if (err.code === 20002) {
                        layer.open({
                            type: 1,
                            title: false,//不显示标题栏
                            closeBtn: false,
                            area: '300px;',
                            shade: 0.8,
                            id: 'LAY_layuipro', //设定一个id，防止重复弹出
                            btn: ['重新登录'],
                            btnAlign: 'c',
                            moveType: 1,
                            content: '<div style="padding: 60px 30px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">您的登录信息已失效，请重新登录！</div>',
                            success: function (layero) {
                                var btn = layero.find('.layui-layer-btn');
                                btn.find('.layui-layer-btn0').attr({
                                    href: '../login/login.html'
                                });
                            }
                        });
                    } else {
                        layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                    }
                }
            });

            //监听工具条
            table.on('tool(LAY-wechat-manage)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if (layEvent === 'editWechatTag') { //查看
                    layer.open({
                        type: 1,
                        area: ['600px', '400px'],
                        title: '编辑微信标签',
                        content: $('#wechat_tag'),
                        success: function () {
                            $('#wechat_tag input[name=name]').val(data.name)
                            $('#wechat_tag input[name=id]').val(data.id)
                            if (data.status === 10) {
                                $('#wechat_tag #defaultRadio').prop('checked', true)
                                $('#wechat_tag #forbiddenRadio').prop('checked', false)
                            } else {
                                $('#wechat_tag #defaultRadio').prop('checked', false)
                                $('#wechat_tag #forbiddenRadio').prop('checked', true)
                            }
                            form.render('radio')
                        }
                    })
                } else if (layEvent === 'delWechatTag') {
                    layer.confirm('确认要删除该微信标签吗？', function (index) {
                        service.delete('api/v1/wxmarks/' + data.id).then((response) => {
                            if (response.code === 200) {
                                layer.msg('删除成功', {offset: '45vh', icon: 1, time: 1000}, function () {
                                    layer.closeAll()
                                    table.reload('LAY-wechat-manage', {
                                        where: getSearchData(),  //设定异步数据接口的额外参数，任意设
                                        page: {
                                            curr: 1 //重新从第 1 页开始
                                        }
                                    });
                                })
                            } else {
                                layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                            }
                        }).catch((err) => {
                            layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                        })
                    });
                } else if (layEvent === 'viewWxs') {
                    layer.open({
                        type: 1,
                        title: '微信列表',
                        area: ['700px', '500px'],
                        content: $('#wechat_list_by_tag'),
                        success: function () {
                            table.render({
                                elem: '#wechat_list'
                                , page: false //开启分页
                                , cols: [[ //表头
                                    {field: 'Id', title: 'Id', fixed: 'left'},
                                    {field: 'NickName', title: '昵称'},
                                    {field: 'WxId', title: '微信id'},
                                ]]
                                , data: data.WxMarkInfos
                            })
                        }
                    })
                }
            });

            reloadList = function (reset, stayPage) {
                if (reset === true) {
                    $('#onStatus').val('0');
                    $('#name').val('');
                    layui.form.render("select");
                }
                if (stayPage == true) {
                    table.reload('LAY-wechat-manage', {
                        where: getSearchData() //设定异步数据接口的额外参数，任意设
                    });
                } else {
                    table.reload('LAY-wechat-manage', {
                        where: getSearchData(),  //设定异步数据接口的额外参数，任意设
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                }
            };
        });

    </script>
    <script type="text/html" id="barDemo">
        <button class="layui-btn layui-btn-xs" lay-event="editWechatTag">编辑</button>
        <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="viewWxs">查看微信号</button>
        <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delWechatTag">删除</button>
    </script>
</div>
</body>
<!--微信列表-->
<div class="layui-row" id="wechat_list_by_tag" style="display: none;padding: 0 20px 20px">
    <div class="layui-col-md12">
        <div class="layui-card">
            <!--表格内容区域-->
            <table id="wechat_list" lay-filter="wechat_list"></table>
        </div>
    </div>
</div>
</html>
